<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    @select="handleMenuSelect"
  >
    <el-menu-item index="manage">
      <i class="el-icon-user-solid"></i>
      用户信息</el-menu-item>
    <el-menu-item index="manage-recruitment">
      <i class="el-icon-phone-outline"></i>
      招聘信息</el-menu-item>
    <el-menu-item index="manage-company">
      <i class="el-icon-user"></i>
      公司信息</el-menu-item>
    <el-menu-item index="manage-position">
      <i class="el-icon-s-custom"></i>
      岗位信息</el-menu-item>
  </el-menu>
</template>
  
  <script>
export default {
  data() {
    return {
      activeIndex: "", // 默认选中的菜单项
    };
  },
  created() {
    // 在组件创建时获取当前路由的名称，并设置为 activeIndex 的初始值
    this.activeIndex = this.$route.name || "manage"; // 如果没有路由名称，默认为 "manage"
  },
  methods: {
    handleMenuSelect(index) {
      // 如果当前选中的菜单项已经是目标路由，则不执行重复导航
      if (this.activeIndex === index) {
        return;
      }
      switch (index) {
        case "manage":
          this.$router.push({ name: "manage" });
          break;
        case "manage-recruitment":
          this.$router.push({ name: "manage-recruitment" });
          break;
        case "manage-company":
          this.$router.push({ name: "manage-company" });
          break;
        case "manage-position":
          this.$router.push({ name: "manage-position" });
          break;
        default:
          break;
      }
    },
  },
};
</script>
  
  <style>
.el-menu-vertical-demo {
  background-color: rgb(211, 220, 230);
}
/* 可以根据需要自定义样式 */
</style>
  